<template>
  <view class="order-item" @click="goDetail">
    <image mode="aspectFit" class="order-img" :src="item.imageUrl[0]"></image>
    <view class="order-info">
      <view class="price-tag">¥{{ item.reward / 100 }}</view>
      <view class="title">{{ item.title }}</view>
      <view class="desc">{{ item.description }}</view>
      <view class="extra-info">
        <view class="user-info">
          <view class="tag">{{
            item.sex == 1 ? "男" : item.sex == 2 ? "女" : "未知"
          }}</view>
          <view class="tag">{{ calculateAge(item.birthday) }}</view>
          <view class="tag">{{ item.height }}cm</view>
          <view class="tag">{{ item.weight }}kg</view>
        </view>
        <view class="location">
          <u-icon name="map-fill"></u-icon>
          <span style="margin-left: 10rpx; color: #333; font-size: 28rpx">
            {{ calcAddress(item.detailAddress) }}</span
          >
        </view>
      </view>
    </view>
    <view class="urgent-tag" v-if="item.urgent">
      <span>加急</span>
    </view>
  </view>
</template>

<script>
import { calculateAge } from "@/utils/util";
export default {
  props: {
    item: {
      default: {},
    },
  },
  methods: {
    goDetail() {
      uni.navigateTo({
        url: `/pages/mission/missionDetail?id=${this.item.id}`,
      });
    },
    calculateAge(time) {
      return calculateAge(time);
    },
    calcAddress(addr) {
      let i = addr ? addr.indexOf(" ") : -1;
      if (i == 0 || i == -1) {
        return "未知";
      } else {
        return addr.slice(0, i);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.order-item {
  padding: 32rpx;
  background: #f5f7fa;
  border-radius: 16rpx;
  position: relative;
  margin-bottom: 18rpx;

  .order-img {
    width: 100%;
    height: 218rpx;
    border-radius: 4rpx;
  }

  .order-info {
    .price-tag {
      font-size: 36rpx;
      color: #f85c02;
      margin-top: 16rpx;
      font-weight: bold;
    }

    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-top: 18rpx;
    }

    .desc {
      font-size: 28rpx;
      color: #666;
      line-height: 40rpx;
      margin-top: 16rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .extra-info {
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      color: rgba(51, 158, 255, 1);

      .user-info {
        display: flex;
        .tag {
          padding: 4rpx 8rpx;
          border: 2rpx solid #339eff;
          margin-right: 8rpx;
        }
      }

      .location {
        display: flex;
        align-items: center;
        font-size: 28rpx;
      }
    }
  }

  .urgent-tag {
    background: #c95441;
    color: #fff;
    font-size: 24rpx;
    padding: 6rpx 12rpx;
    border-radius: 6rpx;
    position: absolute;
    right: 32rpx;
    top: 277rpx;
  }
}
</style>